<template>
	<!-- <view class="house-item u-skeleton u-m-l-28 u-m-r-28" v-show="skeletonLoading">
		<view class="u-flex">
			<view class="house-item-img-wrap u-m-r-20">
				<image :src="data.img" mode="aspectFill" class="u-skeleton-fillet"></image>
			</view>
			<view class="u-flex-1">
				<view class=" u-m-b-10 u-skeleton-rect">
					{{data.text}}
				</view>
				<view class="u-m-b-10 u-skeleton-rect">
					{{data.text}}
				</view>
				<view class="u-m-b-10 u-skeleton-rect" >
					{{data.text}}
				</view>
			</view>
		</view>
	</view> -->
	<template v-if="status == 'nodata'">
		<view class="u-flex" style="justify-content: center">
			<image class="nodata-img" :src="nodataImg" mode="aspectFit"></image>
		</view>
		<view class="u-text-center u-tips-color" v-if="nodataText">
			{{nodataText}}
		</view>
		<slot name="nodata"></slot>	
	</template>
	<template v-else>
		<u-loadmore :status="status" @loadmore="loadmore" :load-text="loadText" />
	</template>
</template>
<script setup>
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin
	} = proxy.$util;
	const props = defineProps({
		status: {
			type: String,
			default: 'loading', //loading / nomore nodata  loadmore
		},
		nodataImg:{
			type: String,
			default: '/static/images/nodata.png',
		},
		nodataText:{
			type: String,
			default: '暂无数据',
		}
	})
	const loadText = {
		loadmore: '轻轻上拉',
		loading: '努力加载中',
		nomore: '没有了'
	}
	const data = reactive({
		img: 'https://qlogo2.store.qq.com/qzone/1416956117/1416956117/100?1531323520',
		text: 'uView'
	})
	const loadmore = () => {

	}
</script>

<style lang="scss" scoped>
	.nodata-img {
		width: 500upx;
		height: 500upx;
	}

	.container {
		// padding: 20rpx 60rpx;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}
</style>